<template>
  <div>
    <!-- 表单 -->
    <el-form ref="searchForm" label-width="95px" :model="userInfo">
    <el-row>
      <el-col :span="6">
        <el-form-item label="学科" prop="subjectID">
          <el-select  placeholder="请选择" v-model="userInfo.subjectID" @change="subjectChage">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
              >
              </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录" prop="catalog">
            <el-select  placeholder="请选择" v-model="userInfo.catalog">
              <el-option v-for="item in directorysList" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签" prop="tags">
            <el-select  placeholder="请选择" v-model="userInfo.tags">
              <el-option v-for="item in tagsList" :key="item.id" :label="item.tagsName" :value="item.id"></el-option>

            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字" prop="keyword">
            <el-input  placeholder="根据题干搜索" style="width: 220px" v-model="userInfo.keyword"></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="试题类型" prop="questionType">
            <el-select  placeholder="请选择" v-model="userInfo.questionType">
              <el-option
              v-for="item in questionTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度" prop="difficulty">
            <el-select  placeholder="请选择" v-model="userInfo.difficulty">
              <el-option
              v-for="item in difficultyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向" prop="direction">
            <el-select  placeholder="请选择" v-model="userInfo.direction">
              <el-option
              v-for="(item, i) in directionList"
              :key="i"
              :label="item"
              :value="i"
              >
              </el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人" prop="creator">
            <el-select  placeholder="请选择" v-model="userInfo.creator">
              <el-option v-for="item in userList" :key="item.value" :label="item.username" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="题目备注" prop="remarks">
            <el-input  style="width: 220px" v-model="userInfo.remarks"></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简称" prop="enterprise">
            <el-input  style="width: 220px" v-model="userInfo.enterprise"></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="城市" prop="province" @change.native="getArea">
            <el-select v-model="userInfo.province"  placeholder="请选择" style="width: 106px; margin-right: 10px">
            <el-option v-for="(item, i) in provincesList" :key="i" :label="item.city" :value="item.city"></el-option>

            </el-select>
            <el-select v-model="userInfo.city" placeholder="请选择" style="width: 106px">
              <el-option v-for="(item, i) in citysList" :key="i" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
            <div style="margin-left: 100px">
              <el-button size="small" @click="eliminate">清除</el-button>
            <el-button type="primary" size="small" @click="searchBtn">搜索</el-button>
            </div>
          </el-form-item>
      </el-col>
    </el-row>
    </el-form>
    <!-- tab选项卡 -->
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="全部" name="first"></el-tab-pane>
      <el-tab-pane label="待审核" name="second"></el-tab-pane>
      <el-tab-pane label="已审核" name="third"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      <!-- 消息提示的文案 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon>
      </el-alert>
      <!-- 数据列表 -->
      <el-table v-loading="loading" :data="filterList" style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="125">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="120">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="120">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="120"
        >
        <template #default="scope">
          <p v-if="scope.row.questionType == '1'">单选</p>
          <p v-else-if="scope.row.questionType == '2'">多选</p>
          <p v-else>简答</p>
        </template>
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          width="300"
        >
        <template #default="scope">
          <div v-html="scope.row.question"></div>
        </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="180"
        >
        <template #default="scope">
          <span>{{ formTime(scope.row.addDate) }}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="120"
        >
        <template #default="scope">
          <p v-if="scope.row.difficulty == '1'">简单</p>
          <p v-else-if="scope.row.difficulty == '2'">一般</p>
          <p v-else>困难</p>
        </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态"
          width="120"
        >
        <template #default="scope">
          <p v-if="scope.row.chkState == '0'">待审核</p>
          <p v-else-if="scope.row.chkState == '1'">已审核</p>
          <p v-else>已拒绝</p>
        </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="120">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态"
          width="120"
        >
        <template #default="scope">
          <p v-if="scope.row.publishState == '1'">上架</p>
          <p v-else>下架</p>
        </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200">
          <template #default="scope">

            <el-button type="text" size="small" @click="previewClick(scope.row.id)">预览</el-button>

            <el-button
            type="text"
            size="small"
            @click="showCheckDialog(scope.row.id)"
            :disabled="
                  !(scope.row.chkState === 0) || scope.row.publishState === 1
                "
            >审核</el-button>

            <el-button type="text" size="small" @click="changeQuestion(scope.row.id)">修改</el-button>

            <el-button
            type="text"
            size="small"
            @click="
            putaway({
              id: scope.row.id,
              publishState: 1
            })
            "
            v-if="scope.row.publishState === 0"
            >上架</el-button>

            <el-button
            type="text"
            size="small"
            @click="
            putaway({
              id: scope.row.id,
              publishState: 0
            })
            "
            v-else
            >下架</el-button>
            <el-button type="text" size="small" @click="delClick(scope.row.id)" :disabled="scope.row.publishState === 1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      style="float: right; margin: 15px 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next, sizes, jumper"
      :current-page="+query.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="+query.pagesize"
      :total="total">
      </el-pagination>
    </el-tabs>
    <!-- 预览 -->
    <preview-box
    :previewDialog="previewDialog"
    :previewId="previewId"
    @close-previewDialog="previewDialogClose"
    ></preview-box>
    <!-- 审核 -->
    <questions-check
    :checkDialog="checkDialog"
    :checkId="checkId"
    @close-checkdialog="checkDialogClose"
    @uplod-list="getQuestionsList()"
    >
    </questions-check>
  </div>
</template>

<script>
import { choice, choicePublish, remove } from '@/api/hmmm/questions.js'// 获取数据列表、详情预览、上下架、删除
import { list } from '@/api/hmmm/subjects.js'
import { list as simpleTags } from '@/api/hmmm/tags.js'
import { list as simpleDirectorys } from '@/api/hmmm/directorys.js'
import { simple as simpleUser } from '@/api/base/users'
import dayjs from 'dayjs'
import { datas } from '@/api/hmmm/citys.js'// 城市列表
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import previewBox from '../components/preview-box.vue'
import questionsCheck from '../components/questions-check.vue'
export default {
  components: {
    previewBox,
    questionsCheck
  },
  data () {
    return {
      // from表单数据123
      userInfo: {
        // 学科
        subjectID: '',
        // 目录
        catalog: '',
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creator: '',
        // 题目备注
        remarks: '',
        // 企业简称
        enterprise: '',
        // 城市
        city: '',
        // 省份
        province: ''
      },
      // 要显示的tab栏
      activeName: 'first',
      // 学科列表
      list: [],
      // 目录列表
      directorysList: [],
      // 标签列表
      tagsList: [],
      // 录入人列表
      userList: [],

      // 表格数据
      tableList: [],
      // 分页器数据
      query: {
        page: 1,
        pagesize: 5
      },
      // 总条数
      total: 0,
      // 城市
      provincesList: datas,
      // 地区
      citysList: {},
      // 难度
      difficultyList: difficulty,
      // 题型
      questionTypeList: questionType,
      // 方向
      directionList: direction,
      // 加载效果
      loading: false,
      // 审核栏窗口
      checkDialog: false,
      // 审核 id
      checkId: 0,
      // 审核按钮状态
      checkdisable: true,
      // 预览窗口
      previewDialog: false,
      // 预览id
      previewId: 0
    }
  },
  created () {
    this.getList()
    this.getUser()
    this.getQuestionsList()
  },
  watch: {
    // 监视城市变化
    'userInfo.province': function () {
      this.getArea()
    }
  },
  computed: {
    filterList () {
      if (this.activeName === 'first') {
        return this.tableList
      } else if (this.activeName === 'second') {
        return this.tableList.filter((item) => {
          return item.chkState === 0
        })
      } else if (this.activeName === 'third') {
        return this.tableList.filter((item) => {
          return item.chkState === 1
        })
      } else if (this.activeName === 'fourth') {
        return this.tableList.filter((item) => {
          return item.chkState === 2
        })
      }
      return []
    }
  },
  methods: {
    // 获取学科简单列表
    async getList () {
      const res = await list()
      this.list = res.data.items
      // console.log(res)
    },
    // 学科改变
    subjectChage (item) {
      // console.log(item, 'xxx')
      this.getTags(item)
      this.getDirectorys(item)
    },
    // 获取标签目录
    async getTags (item) {
      // const ID = this.userInfo.subjectID.toString()
      const { data } = await simpleTags({ subjectID: item })
      // console.log(data, '///')
      this.tagsList = data.items
    },
    // 获取二级目录
    async getDirectorys (item) {
      // const ID = this.userInfo.subjectID.toString()
      const { data } = await simpleDirectorys({ subjectID: item })
      // console.log(data, '...')
      this.directorysList = data.items
    },
    // 获取录入人
    async getUser () {
      const { data } = await simpleUser()
      // console.log(res)
      this.userList = data
    },

    // 城市联动
    getArea () {
      let newCity = []
      this.provincesList.forEach(item => {
        if (item.city === this.userInfo.province) {
          newCity = item
        }
      })
      if (newCity) {
        this.citysList = newCity.area
      }
    },
    // 清除
    eliminate () {
      this.userInfo.subjectID = ''
      this.userInfo.catalog = ''
      this.userInfo.tags = ''
      this.userInfo.keyword = ''
      this.userInfo.questionType = ''
      this.userInfo.difficulty = ''
      this.userInfo.direction = ''
      this.userInfo.creator = ''
      this.userInfo.enterprise = ''
      this.userInfo.remarks = ''
      this.userInfo.city = ''
      this.userInfo.province = ''
    },
    // 搜索
    async searchBtn () {
      if (this.userInfo.subjectID === '' && this.userInfo.keyword === '') return
      const { data } = await choice({
        ...this.userInfo,
        ...this.query
      })
      this.tableList = data.items
    },
    // 每页条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.query.pagesize = val
      this.query.page = 1
      this.getQuestionsList()
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.query.page = val
      this.getQuestionsList()
    },
    // 获取表格数据
    async getQuestionsList () {
      const { data } = await choice(this.query)
      this.tableList = data.items
      // console.log(this.tableList, '///')
      this.total = data.counts
      // console.log(data)
    },
    // 转换时间格式
    formTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 预览
    previewClick (id) {
      this.previewDialog = true
      this.previewId = id
    },
    previewDialogClose () {
      this.previewDialog = false
    },
    // 审核
    showCheckDialog (id) {
      this.checkDialog = true
      this.checkId = id
    },
    checkDialogClose () {
      this.checkDialog = false
    },
    // 修改
    changeQuestion (id) {
      this.$router.push({
        path: '/questions/new',
        query: { id }
      })
    },
    // 上架和下架
    putaway (data) {
      const str = data.publishState === 1 ? '上架' : '下架'
      this.$confirm(`您确认${str}这道题目吗？`, '提示', { type: 'warning' }).then(async () => {
        await choicePublish(data)
        // console.log(res)
        this.$message.success(`${str}成功`)
        this.getQuestionsList()
      }).catch(() => {
        console.log('取消')
      })
    },
    // 删除
    delClick (id) {
      this.$confirm('您确认删除这道题目吗？', '提示', { type: 'warning' }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        this.getQuestionsList()
      }).catch(() => {
        console.log('取消')
      })
    }
  }

}
</script>

<style>

</style>
